<template>
  <div class="all">
    <!--    头部 标题-->
    <div style="position: sticky;top: 0;background: #fff;z-index: 99">
      <van-sticky class="header" :offset-top="0">
        <van-nav-bar
          title="已完成评定量表"
        >
          <template #left>
          <span @click="onClickLeft" class="fanhui">
            <img src="../../assets/返回.png" alt="">
            <span class="">返回</span>
          </span>
          </template>
          <template #right>
<!--            <span v-show="isEdit !== 0" @click="onClickRight" class="sides">-->
<!--              <img src="../../assets/蓝添加.png" alt="" style="width: 13px;height: 13px">-->
<!--              新增评定-->
<!--            </span>-->
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <van-calendar v-model="show"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :value="selectDate"
                  :show-confirm="false"
                  :round="false"
                  type="range"
                  @confirm="onConfirm"
                  color="#1da4f2"
                  position="right" />
    <div ref="box" class="content">
      <div class="title">
        <a class="hengGang"></a>
        <span>个人基本信息</span>
      </div>
      <div class="personInfo">
        <ul>
<!--          <li class="personHeader">接受评定人基本信息</li>-->
          <li>
            <p>
              <img class="photo" v-if="peopleList.PHOTO === null || peopleList.PHOTO === '' || peopleList.PHOTO === undefined"
                   src="../../assets/photo.png" alt="">
              <img v-else :src="peopleList.PHOTO" alt="">
              <a style="font-weight: bold">{{peopleList.name}}</a>
              <a v-show="Number(peopleList.sex) === 1">男</a>
              <a v-show="Number(peopleList.sex)=== 2">女</a>
              <a v-show="peopleList.age!==null && peopleList.age > 0">{{peopleList.age}}岁</a>
            </p>
            <p>
              <span class="color">联系电话：
                <span>{{peopleList.phone}}</span>
              </span>
            </p>
<!--            <p>-->
<!--              <span class="color">初步诊断：-->
<!--                <span v-if="peopleList.DIAGNOSE === '' || peopleList.DIAGNOSE === null || peopleList.DIAGNOSE === undefined">-->
<!--                  未填写-->
<!--                </span>-->
<!--                <span v-else>{{peopleList.DIAGNOSE}}</span>-->
<!--              </span>-->
<!--            </p>-->
            <p>
              <span class="color">联系地址：
                <span>{{peopleList.zuizhongAddress}}</span>
              </span>
            </p>
          </li>
        </ul>
      </div>
      <div class="title">
        <a class="hengGang"></a>
        <span>已评定量表信息</span>
      </div>
      <template id="templateTabs">
        <div class="tabList">
          <div class="search PingGuType">
            <el-select v-model="pgType"
                       style="width: 130px;"
                       @volumechange="clickPgType"
                       @focus="clickPgType"
                       @change="changePer()"
                       :class="[Number(pgType) > 0 ? 'select' : 'noselect']"
                       placeholder="评定类型">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="search">
            <el-select v-model="pgName"
                       style="width: 150px"
                       filterable
                       @volumechange="clickPgName"
                       @focus="clickPgName"
                       @change="changePer"
                       :class="[pgName.length > 0 ? 'select' : 'noselect']"
                       placeholder="评定量表">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="search ">
            <el-select v-model="pgFangshi"
                       style="width: 130px"
                       filterable
                       @change="changePer"
                       :class="[pgFangshi.length > 0 ? 'select' : 'noselect']"
                       placeholder="评定方式">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="search"
               :class="[selectDate.length > 0 ? 'select' : 'noselect']"
               style="background: #fff;border-radius: 15px">
            <input class="DateInp noselect1" style=""
                   @click="show=true"
                   readonly
                   placeholder="评定日期"
                   v-model="selectDate"/>
          </div>
          <div class="search">
            <el-select v-model="pgPerName"
                       style="width: 160px"
                       filterable
                       @volumechange="clickpgPerName"
                       @focus="clickpgPerName"
                       @change="changePer"
                       :class="[pgPerName.length > 0 ? 'select' : 'noselect']"
                       placeholder="评定人名">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <div class="listArr">
        <ul class="listUl" v-for="(item, index) in list" :key="index" @click="goMore(item.ID)">
          <li class="liTop">
            <img src="../../assets/题目@2x.png" class="left_img" alt="">
            <span class="subject">
              {{item.ASSESS_NAME}}
                <a class="pingSelfBtn" v-show="item.ASSESS_TYPE == 1">门诊</a>
                <a class="pingSelfBtn" v-show="item.ASSESS_TYPE == 2">住院</a>
                <a class="pingSelfBtn" v-show="item.ASSESS_TYPE == 3 || item.ASSESS_TYPE == 4 || item.ASSESS_TYPE == 5">居家</a>
<!--              <a class="pingSelfBtn" v-if="item.OP_USER_ID === item.USER_ID">自</a>-->
<!--              <a class="pingSelfBtn" v-else>他</a>-->
            </span>
            <img src="../../assets/更多灰@2x.png" class="hui" alt="">
          </li>
          <li class="liCenter">
            <a class="date">评定人员: {{item.ASSESS_USER_NAME}}</a>
          </li>
<!--          <li class="liCenter">-->
<!--            <a class="date">评定来源: <span v-show="item.ASSESS_TYPE == 1">门诊</span>-->
<!--              <span v-show="item.ASSESS_TYPE == 2">住院</span>-->
<!--              <span v-show="item.ASSESS_TYPE == 3">居家</span>-->
<!--            </a>-->
<!--          </li>-->
          <li class="liCenter">
            <a class="result">
              <span style="white-space: nowrap">
                评定结果:
              </span>
              <span class="jieguo">{{item.RESULT}}</span></a>
          </li>
          <li class="liCenter">
            <a class="date">评定日期: {{item.CREATED_AT}}</a>
            <a class="grade" v-show="item.AUDIT_STATE == undefined || item.AUDIT_STATE == null || item.AUDIT_STATE == ''"><span class="gradeTitle"  >总分:</span><span class="gradeNum">{{item.ALL_POINTS}}分</span></a>
          </li>
          <li class="liCenter" v-show="item.AUDIT_STATE">
            <a class="date"> 审核人员: {{item.AUDIT_USER_NAME}}</a>
          </li>
          <li class="liCenter" v-show="item.AUDIT_STATE">
            <a class="date"> 审核状态: {{Number(item.AUDIT_STATE) === 1 ? '审核中' : Number(item.AUDIT_STATE) === 2 ? '审核完成' : ''}}</a>
            <a class="grade"><span class="gradeTitle">总分:</span><span class="gradeNum">{{item.ALL_POINTS}}分</span></a>
          </li>
          <li class="liBottom" style="display: flex;justify-content: flex-end">
            <button style="width: 70px;
                          height: 29px;
                          border: none;
                          color: #FFFFFF;
                          background: #1DA4F2;
                          border-radius: 14px;
margin-right: 10px"
              v-if="Number(item.AUDIT_STATE) == 1 && userid == item.AUDIT_USER_ID"
                    @click.stop="clickCopy(item.ID)"
            >审核评定</button>
          </li>
        </ul>
      </div>
<!--      <van-empty-->
<!--        style="width: 100%;height: 60%"-->
<!--        v-show="list.length <= 0"-->
<!--        class="custom-image"-->
<!--        :image="require('../../assets/暂无数据.png')"-->
<!--        description="暂无已评定量表信息"-->
<!--      />-->
      <van-empty
        style="width: 100%;height: 60%"
        v-show="list.length <= 0"
        class="custom-image"
        :image="require('../../assets/空两本书.png')"
        description="暂无已评定量表信息"
      />
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'SelfPingGu',
  data () {
    return {
      show: false,
      type: '',
      list: [],
      subjectList: [],
      userid: '',
      loading: true,
      endShow: false,
      // 评定类型
      pgType: '',
      options1: [],
      // 评定表名
      pgName: '',
      options2: [],
      // 评定方式
      pgFangshi: '',
      options3: [
        {
          value: '0',
          label: '全部评定方式'
        },
        {
          value: '1',
          label: '自我评定'
        },
        {
          value: '2',
          label: '他人评定'
        }
      ],
      pgPerName: '',
      options4: [],
      disid: '', // 存储disid
      assess_self_typeTitle: '评定表选择',
      assess_self_typeIndex: '',
      ACCEPT_USER_ID: '',
      peopleList: [],
      selectDate: '',
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(),
      startTime: '',
      endTime: '',
      page: 1,
      assess_type: '',
      isEdit: Number(this.$route.query.isEdit),
      team_id: this.$route.query.team_id
    }
  },
  mounted () {
    let obj = JSON.parse(sessionStorage.getItem('selfInformation'))
    // 从网址上截取 userid 后面的值
    this.userid = obj.userid
    // this.userid = this.$utils.getUrlKey('userid')
    this.type = this.$utils.getUrlKey('type')
    this.ACCEPT_USER_ID = this.$utils.getUrlKey('ACCEPT_USER_ID')
    // $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
    // 被选择人id
    if (window.sessionStorage.getItem('ACCEPT_USER_ID') !== null && window.sessionStorage.getItem('ACCEPT_USER_ID') !== undefined) {
      this.ACCEPT_USER_ID = window.sessionStorage.getItem('ACCEPT_USER_ID')
    }
    if (this.type === '3') {
      this.disid = JSON.parse(localStorage.disid).id
    } else {
      this.disid = ''
    }
    var time = this.$route.query.time
    if (time !== undefined && time !== null && time !== '') {
      this.startTime = time
      this.endTime = time
    }
    this.getData()
    // 康复训练评定
    if (this.type === '3') {
      document.title = '康复训练评定'
    }
    // 根据字典查询 自我评定类型
    // this.getlistByType()
    this.getPerson()
    window.addEventListener('scroll', this.scrollBottom, true)
  },
  methods: {
    // 滚动事件
    scrollBottom () {
      let scrollTop = this.$refs.box.scrollTop
      let clientHeight = this.$refs.box.clientHeight
      let scrollHeight = this.$refs.box.scrollHeight
      if (scrollHeight - scrollTop <= clientHeight + 300 && this.isScroll === true) {
        this.isScroll = false
        setTimeout(() => {
          this.page += 1
          // 移除滚动事件
          window.removeEventListener('scroll', this.scrollBottom, true)
          this.getData()
        }, 500)
      }
    },
    clickpgPerName () {
      this.$http.getSelectMyAssessOpname({'ACCEPT_USER_ID': this.ACCEPT_USER_ID,
        'OP_NAME': '',
        'assess_type': this.assess_type,
        team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options4 = [{
            value: '',
            label: '不限评定人名'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.NICK_NAME,
                label: curr.NICK_NAME
              }
              _this.options4.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 所有筛选切换之后触发
    changePer () {
      this.page = 1
      this.getData()
    },
    // 点击选择日期
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.selectDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.startTime = this.formatDate(start)
      this.endTime = this.formatDate(end)
      this.page = 1
      this.getData()
    },
    // 点击评定表名
    clickPgName () {
      this.$http.getSelectMyAssessName({'ACCEPT_USER_ID': this.ACCEPT_USER_ID,
        'ASSESS_NAME': '',
        'assess_type': this.assess_type,
        team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options2 = [{
            value: '',
            label: '全部评定量表'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.ASSESS_NAME,
                label: curr.ASSESS_NAME
              }
              _this.options2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击评定类型
    clickPgType () {
      this.$http.getSelectMyAssessType({'ACCEPT_USER_ID': this.ACCEPT_USER_ID,
        'assess_type': this.assess_type,
        team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options1 = [{
            value: '',
            label: '全部评定类型'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.dict_value,
                label: curr.dict_name
              }
              _this.options1.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击复评跳转
    clickCopy (id) {
      this.$router.push({path: '/copy', query: {'ID': id, team_id: this.team_id,userid: this.userid}})
    },
    // 获取个人基本信息
    getPerson () {
      // this.$http.findPersonal({'USER_ID': this.ACCEPT_USER_ID})
      //   .then(res => {
      //     console.log(res)
      //     this.peopleList = res.data
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })
      this.$http.findUserXinXiTuoMin({'data_user_id': this.ACCEPT_USER_ID, team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            sessionStorage.setItem('PatientInformation', JSON.stringify(res.data.data))
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    goMore (id) {
      this.$router.push({path: '/pingguDetails', query: {ID: id}})
    },
    // 点击返回
    onClickLeft () {
      // 返回上一页
      this.$router.go(-1)
    },
    // 点击新增评定项目
    onClickRight () {
      if (this.assess_type === '' || this.assess_type === undefined || this.assess_type === null) {
        // 类别 （门诊、住院、居家）
        sessionStorage.removeItem('assess_type')
      }
      // 初步诊断
      sessionStorage.removeItem('diagnose')
      // 目前状况
      sessionStorage.removeItem('current_status')
      sessionStorage.removeItem('isXiu')
      this.$router.push({path: '/enterPingGu', query: {'type': this.type}})
    },
    // 获取所有评定表列表
    getList (name) {
      // axios.get('http://jmx-kfdj.com/kfhl/miniassess/list', {params: {'TYPE': 1}})
      this.$http.list({
        TYPE: this.type,
        name: name,
        assess_self_type: this.assess_self_typeIndex,
        team_id: this.team_id})
        .then(res => {
          console.log(res)
          this.subjectList = res.data.data
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取我的评定列表 http://jmx-kfdj.com/kfhl/miniassess/getMyAssess
    getData (name, dateSelect, markSelect, ASSESS_SELF_TYPE) {
      // eslint-disable-next-line camelcase
      this.assess_type = this.$route.query.assess_type
      // eslint-disable-next-line camelcase
      if (this.assess_type === undefined || this.assess_type === null) {
        // eslint-disable-next-line camelcase
        this.assess_type = ''
        sessionStorage.setItem('assess_type', '')
      } else {
        sessionStorage.setItem('assess_type', this.assess_type)
      }
      var _this = this
      if (Number(this.type) === 3) {
        this.$http.getMyAssess({
          DIS_ID: this.disid,
          ASSESS_NAME: this.pgName, // 评定表名
          ACCEPT_USER_ID: this.ACCEPT_USER_ID, // 被评定人id
          TYPE: this.type,
          ASSESS_SELF_TYPE: this.pgType, // 评定类型
          OP_NAME: this.pgPerName, // 评定人姓名
          ASSESS_WAY: this.pgFangshi,
          startTime: this.startTime,
          endTime: this.endTime,
          page: this.page,
          assess_type: this.assess_type,
          team_id: this.team_id
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (res.data.data.length > 0) {
                window.addEventListener('scroll', this.scrollBottom, true)
                this.isScroll = true
              } else {
                window.removeEventListener('scroll', this.scrollBottom, true)
                this.isScroll = false
              }
              if (this.page === 1) {
                this.list = []
                this.list = res.data.data
              } else {
                res.data.data.forEach(function (current, index, arr) {
                  _this.list.push(current)
                })
              }
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else if (Number(this.type) === 2) {
        this.$http.getMyAssess({
          PATIENT_USER_ID: this.userid, // type为2时，网址的userid会作为患者id
          ASSESS_NAME: this.pgName, // 评定表名
          ACCEPT_USER_ID: this.ACCEPT_USER_ID, // 被评定人id
          TYPE: this.type,
          ASSESS_SELF_TYPE: this.pgType, // 评定类型
          OP_NAME: this.pgPerName, // 评定人姓名
          ASSESS_WAY: this.pgFangshi,
          startTime: this.startTime,
          endTime: this.endTime,
          page: this.page,
          assess_type: this.assess_type,
          team_id: this.team_id
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (res.data.data.length > 0) {
                window.addEventListener('scroll', this.scrollBottom, true)
                this.isScroll = true
              } else {
                window.removeEventListener('scroll', this.scrollBottom, true)
                this.isScroll = false
              }
              if (this.page === 1) {
                this.list = []
                this.list = res.data.data
              } else {
                res.data.data.forEach(function (current, index, arr) {
                  _this.list.push(current)
                })
              }
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.$http.getMyAssess({
          ASSESS_NAME: this.pgName, // 评定表名
          ACCEPT_USER_ID: this.ACCEPT_USER_ID, // 被评定人id
          TYPE: this.type,
          ASSESS_SELF_TYPE: this.pgType, // 评定类型
          OP_NAME: this.pgPerName, // 评定人姓名
          ASSESS_WAY: this.pgFangshi,
          startTime: this.startTime,
          endTime: this.endTime,
          page: this.page,
          assess_type: this.assess_type,
          team_id: this.team_id
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (res.data.data.length > 0) {
                window.addEventListener('scroll', this.scrollBottom, true)
                this.isScroll = true
              } else {
                window.removeEventListener('scroll', this.scrollBottom, true)
                this.isScroll = false
              }
              if (this.page === 1) {
                this.list = []
                this.list = res.data.data
              } else {
                res.data.data.forEach(function (current, index, arr) {
                  _this.list.push(current)
                })
              }
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 日期转换
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  }
}
</script>

<style scoped>
  /deep/ .van-nav-bar__content{
    width: 100%;
    height: 100%;
  }
  .all{
    width: 100vw;
    height: 100%;
    overflow: scroll;
    background: #FAF9FE;
  }
  /deep/ .van-calendar__body{
    margin-bottom: 50px;
  }
  /deep/ .van-picker__confirm{
    color: #1DA4F2;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  /*弹出框取消*/
  /deep/ .van-picker__cancel{
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }

  /deep/ .header .van-nav-bar__title{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .header .right_img .van-image__img{
    width: 6vw;
  }
  /deep/ .header .backImg .van-image__img{
    width: 11vw;
  }
  .header .pingGuImg{
    width: 5vw;
    height: 5vw;
    margin-right: 4vw;
  }
  .fanhui{
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui span {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  /deep/ .van-nav-bar{
    height: 12vw;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .sides{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: #1DA4F2;
  }
  .sides img{
    width: 15px;
    height: 15px;
    margin-right: 3px;
  }
  .left_img{
    margin-left: 4vw;
  }
  .titie{
    font-size: 17px;
    font-weight: 600;
  }
  .listUl {
    width: 92vw;
    margin: 5px auto auto auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 15%);
  }
  .pingSelfBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1da4f2;
    /*width: 16px;*/
    /*height: 16px;*/
    padding: 3px;
    box-sizing: border-box;
    font-size: 11px;
    background: rgba(29, 164, 242, 0.1);
  }
  .listUl li {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .li_header{
    height: 44px;
  }

  .listUl li img {
    /*margin-left: 4vw;*/
  }

  .listUl li a {
    margin-left: 4vw;
    /*font-weight: 600;*/
    overflow-wrap: break-word;
  }
  .listUl .liTop {
    display: flex;
    padding-top: 4vw;
  }
  .listUl .liTop .hui {
    /*width: 2.5vw;*/
    /*height: 4vw;*/
    width: 7px;
    height: 13px;
    margin-right: 4vw;
  }
  .listUl .subject{
    width: 80%;
    font-size: 15px;
    /*font-size: 4.5vw;*/
    font-family: PingFang SC;
    color: #333333;
    margin-left: 3vw;
    display: flex;
    align-items: center;
  }

  .listUl .liTop img {
    width: 7vw;
    height: 7vw;
  }

  .listUl .liCenter {
    /*margin: 6vw auto 3vw auto;*/
    justify-content: space-between;
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .listUl .date {
    font-family: PingFang SC;
    color: #666;
    font-size: 13px;
  }
  .listUl .liBottom{
    display: flex;
    justify-content: space-between;
    padding-bottom: 3vw;
    font-size: 13px;
  }
  .result{
    width: 70vw;
    color: #666;
    font-size: 13px;
    font-family: PingFang SC;
    display: flex;
    /*white-space:nowrap;*/
    /*overflow:hidden;*/
    /*text-overflow:ellipsis;*/
  }
  .jieguo{
    display: block;
    width: 75%;
    margin-left: 2px;
    overflow: hidden ;
    display: -webkit-box ;
    -webkit-line-clamp: 2 ;
    -webkit-box-orient: vertical ;
    word-break: break-all ;
  }
  .listUl .liBottom .grade {
    width: 30vw;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    margin-right: 4vw;
  }
  .gradeTitle{
    font-family: PingFang SC;
    color: #333;
    font-size: 13px;
    margin-right: 2vw;
  }
  .gradeNum {
    color: #1DA4F2;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
  }
/*  弹窗*/
  .wrapper{
    width: 100%;
    height: 100%;
  }
  /deep/ .van-hairline--bottom::after{
    border: none;
  }
  .popHeader{
    width: 92%;
    height: 22%;
    font-size: 17px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
  }
  .popHeader .popdiv{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .popSearch{
    width: 100%;
  }
  .popSearch .sousuo{
    margin-left: 5px;
  }
  .popHeader span:first-child{
    font-family: PingFang SC;
    color: #999999;
    font-weight: bold;
  }
  .popHeader span:nth-child(2){
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .popHeader span:last-child{
    /*margin-right: 4vw;*/
    font-family: PingFang SC;
    font-weight: bold;
    color: #1DA4F2;
    font-weight: bold;
  }
  .popContent {
    width: 92%;
    height: 80%;
    overflow: scroll;
    margin: 0 auto;
  }
  .loading{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /deep/ .custom-image{
    margin-top: 30px;
  }
  /*/deep/ .custom-image .van-empty__image {*/
  /*  width: 90px;*/
  /*  height: 90px;*/
  /*}*/
  #templateTabs{
    overflow-x: scroll;
    position: sticky;
    top:44px;
  }
  .tabList{
    min-height: 44px;
    width: 100%;
    background: #FFFFFF;
    /*background: #A5DBFA;*/
    display: flex;
    align-items: center;
    overflow-x: scroll;
    position: sticky;
    top:0px;

  }
  .tabList::-webkit-scrollbar{
    display: none;
  }
  .search{
    margin-left: 8px;
  }
  >>> .el-select-dropdown__item{
    padding: 0 20px !important;
  }
  >>> .el-select-dropdown{
  }
  .search input::placeholder{
    color: #c0c4cc;
  }
  .content{
    position: relative;
    overflow: auto;
    padding: 0 0 10px 0;
    box-sizing: border-box;
  }
  .personInfo {
    width: 92%;
    background: #FFFFFF;
    margin: 5px auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .personInfo ul{
    width: 100%;
    height: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    font-family: "PingFang SC";
    background: linear-gradient(
      90deg
      , #1DA3F2, #1DC7F2);
    color: white;
    /*background: rgba(29, 164, 242, 0.1)*/
  }
  .color{
    color: #ffffff;
  }
  .personInfo img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  .personHeader{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: #1DA4F2;
    color: #FFFFFF;
    font-size: 15px;
  }
  .personInfo ul li{
    padding: 0 10px;
    box-sizing: border-box;
  }
  .personInfo p{
    width: 100%;
    padding: 5px 0 0 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .personInfo p:last-child{
    margin-bottom: 5px;
  }
  .personInfo p:first-child{
    margin-top: 3px;
  }
  .personInfo p a{
    margin-left: 10px;
    font-size: 15px;
  }
  .el-date-range-picker__content.is-left{
    width: 100%;
    height: 40%;
  }
  .el-date-range-picker .el-picker-panel__content{
    width: 100%;
    height: 40%;
  }

  .DateInp{
    width: 180px;
    height: 32px;
    border-radius: 15px;
    border: 1px solid #1DA4F2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    outline: none;
    background: #1DA4F2;
    line-height: 32px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  }
  .DateInp::placeholder{
    color: #fff !important;
  }
  .DateInp:focus{
    border-color: #fff !important;
  }

  /deep/ .van-empty{
    /*width: 100%;*/
    /*height: 60vh !important;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
  }
  /*/deep/ .van-empty__image {*/
  /*  width: 160px;*/
  /*  height: 100px;*/
  /*  margin: 0 auto;*/
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*}*/

  /*/deep/ .van-empty__image img {*/
  /*  width: 160px;*/
  /*  height: 100px;*/
  /*}*/
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
  .search>input::placeholder{
    color: #1DA4F2 !important;
  }
  /*/deep/ .select1 {*/
  /*  color: #fff !important;*/
  /*  background: rgba(29, 164, 242, 1) !important;*/
  /*  border: 1px solid rgba(29, 164, 242, 1) !important;*/
  /*  border-radius: 15px;*/
  /*}*/
  .noselect1{
    color: #1DA4F2 !important;
    border-radius: 15px;
    background: rgba(29, 164, 242, 0.2) !important;
    border: 1px solid rgba(29, 164, 242, 0.2) !important;
  }
  /deep/ .el-input--small .el-input__inner{
    color: #1DA4F2 !important;
    border-radius: 15px;
    background: rgba(29, 164, 242, 0.2) !important;
    border: 1px solid rgba(29, 164, 242, 0.2) !important;
  }
  /deep/ .is-focus .el-input__inner{
    background: rgba(29, 164, 242, 1) !important;
    border: 1px solid rgba(29, 164, 242, 1) !important;
    border-radius: 15px;
    color: white !important;
  }
  /deep/ .el-icon-arrow-up:before {
    content: "\E6E1";
    color: #1DA4F2 !important;
  }
  /deep/ .el-input__inner::placeholder{
    color:  #1DA4F2 !important;
  }
  /deep/  .is-focus .el-input__inner::placeholder{
    color:  #fff !important;
  }
  /deep/ .is-focus .el-icon-arrow-up:before {
    content: "\E6E1";
    color: #fff !important;
  }

</style>
